import React, { useEffect, useRef } from 'react';
import './Vedio.scss';
import path from '../assets/monitor.mp4';

const Vedio = () => {
    // 使用 useRef 获取视频元素的引用
    const videoRef = useRef(null);

    useEffect(() => {
        // 在 useEffect 中操作视频元素
        const videoElement = videoRef.current;
        if (videoElement) {
            // 设置默认播放速度为0.25
            videoElement.playbackRate = 0.25;
            // 设置视频播放起始时间为17秒
            videoElement.currentTime = 17;
            // 播放视频
            videoElement.play();
        }
    }, []); // 空数组作为第二个参数表示仅在组件挂载时执行一次

    return (
        <div>
            {/* 标题部分 */}
            <div className="title">番茄病害监测</div>
            {/* 视频部分 */}
            <div className="video">
                <video ref={videoRef} width="700" height="400" autoPlay muted>
                    <source src={path} type="video/mp4" />
                    您的浏览器不支持视频标签。
                </video>
            </div>
        </div>
    );
};
export default Vedio;
